<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <el-form  label-width="80px" :inline="true" size="normal" class="demo-form-inline" :disabled="disable">
            <el-form-item label="一级分类">
                <!-- 利用v-model数据双线绑定 检测当有id发生改变的时候 将列表数据成当前id的值 -->
                <el-select  
                v-model="category1Id" 
                placeholder="请选择" 
                >
                    <el-option  v-for="item in categoryList1" :label="item.name" :value="item.id" :key="item.id"/>
                </el-select>
            </el-form-item>
            <el-form-item label="二级分类">
                <el-select   
                 v-model="category2Id"   
                 placeholder="请选择" 
                 >
                    <el-option  v-for="item in categoryList2" :label="item.name" :value="item.id" :key="item.id"/>
                </el-select>
                
            </el-form-item>
            <el-form-item label="三级分类">
                <el-select   
                v-model="category3Id"   
                placeholder="请选择" 
               >
                <el-option  v-for="item in categoryList3" :label="item.name" :value="item.id" :key="item.id"/>  
                </el-select>
                
            </el-form-item>
        </el-form>
        
    </el-card>
    
    
</template>

<script lang="ts">
import { defineComponent } from "vue";


export default defineComponent({
    name: "Category",
});
</script>

<script setup lang="ts">
    import { onMounted ,watch} from "vue";
    import useAttrStore from "@/stores/attr"
    import { storeToRefs } from "pinia";
    //接受传过来的数据
    defineProps<{
        disable:boolean
    }>()
    //拿到对应的一级列表的数据
    const attrStore = useAttrStore()
    const {
        categoryList1,
        category1Id,
        categoryList2,
        category2Id,
        categoryList3,
        category3Id
    }  = storeToRefs(attrStore)
    //初始的时候就请求以及列表数据
    onMounted(()=>{
        attrStore.getCategory1()
    })
    watch(category1Id,()=>{
        //清空二级和三级列表
        categoryList2.value=[]
        category2Id.value=null
        categoryList3.value=[]
        category3Id.value=null
        attrStore.getCategory2()
    })
    watch(category2Id,()=>{
        //清空三级列表
        categoryList3.value = [];
        category3Id.value = null;
        attrStore.getCategory3()
    })
</script>